<template>
  <div class="panel-tab__content">
    <el-button size="small" @click="isDialog" v-if="this.$route.params.type === 1 || this.$route.params.type == '1'">
      点击选择
    </el-button>

    <!--字段列表-->
    <div class="element-property list-property">
      <el-table :data="fileTable" size="mini" max-height="240" border fit>
        <el-table-column prop="activityName" label="业务活动">
          <template slot-scope="{ row, $index }">
            <el-button size="mini" type="text" style="color: #448EF7" @click="getInfo(row.riskId)">
              {{ row.activityName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="风险描述"></el-table-column>
      </el-table>
    </div>
    <el-dialog title="涉及合规风险选择" :visible.sync="complianceOpen" append-to-body width="90%">
      <compliance-tree-table @checkData="checkData" ref="complianceTreeTable"></compliance-tree-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="deptSubmitForm">确 定</el-button>
        <el-button size="small" @click="deptCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="涉及合规风险详情" :visible.sync="complianceInfoOpen" append-to-body width="100%" :fullscreen="true" :lock-scroll="true">
      <el-form ref="form" :model="info" label-width="80px">
        <h4 style="border-left:5px solid #0089ff;padding: 5px;">基本信息</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务活动:" prop="activityId">
              {{ info.activityName }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="业务事项:" prop="event">
              {{ info.event }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险描述" prop="description">
              {{ info.description }}
            </el-form-item>
          </el-col>
        </el-row>
        <h4 style="border-left:5px solid #0089ff;padding: 5px;">合规义务</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="涉及到的法律法规及法条：" prop="regulations">
              {{ info.regulations }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="法规政策要求—禁止事项：" prop="prohibitedMatter">
              {{ info.prohibitedMatter }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="法规政策要求—需要完成的事项：" prop="completionItem">
              {{ info.completionItem }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="违规引发的处罚后果：" prop="consequencePunishment">
              {{ info.consequencePunishment }}
            </el-form-item>
          </el-col>
        </el-row>
        <h4 style="border-left:5px solid #0089ff;padding: 5px;">风险管理措施</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合规风险防控建议：" prop="suggestion">
              {{ info.suggestion }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司内部控制制度：">
              {{ info.controlSystem }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="具体管理程序：">
              {{ info.supervisor }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="措施落实牵头部门:">
              {{ info.leadDeptName }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="措施落实落实部门:" prop="implementDeptName">
              {{ info.implementDeptName }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="风险评估等级:">
              {{ info.riskLevel }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="complianceInfoOpen= false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import ComplianceTreeTable from '@/plugins/package/tree/complianceTreeTable'
import { getRisk } from '@/api/lc/risk'

export default {
  name: 'ComplianceBaseInfo',
  components: {
    ComplianceTreeTable
  },
  props: {
    id: String,
    businessObject: Object,
    type: String,
    idEditDisabled: {
      type: Boolean,
      default: true
    }
  },
  inject: {
    prefix: 'prefix',
    width: 'width'
  },
  data() {
    return {
      options: [],
      complianceOpen: false,
      complianceInfoOpen: false,
      elementId: '',
      elementType: '',
      elementBaseInfo: {},
      propertyForm: {
        compliance: '',
        complianceArray: []
      },
      editingPropertyIndex: -1,
      bpmnElementPropertyList: [],
      otherExtensionList: [],
      multipleSelection: [],
      fileTable: [],
      info: {}
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetBaseInfo())
      }
    },
    businessObject: {
      immediate: true,
      handler: function(val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo())
        }
      }
    }
  },
  methods: {
    resetBaseInfo() {
      console.log('涉及合规风险监听')
      this.fileTable = []
      this.bpmnElement = window?.bpmnInstances?.bpmnElement
      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
      console.log('+_+_+_+_+_+_+_+',this.elementBaseInfo)
      console.log(this.elementBaseInfo)
      this.bpmnElementProperties =
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
          if (ex.$type !== `${this.prefix}:Properties`) {
            this.otherExtensionList.push(ex)
          }
          return ex.$type === `${this.prefix}:Properties`
        }) ?? []
      // 保存所有的 扩展属性字段
      this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), [])
      this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []))
      for (let i = 0; i < this.elementPropertyList.length; i++) {
        let key = this.elementPropertyList[i].name
        if (key === 'compliance') {
          this.fileTable = JSON.parse(this.elementPropertyList[i].value)
        }
      }
    },
    // 保存拓展字段
    saveAttribute(name, value) {
      console.log('保存拓展字段保存拓展字段保存拓展字段this.bpmnElementPropertyList ', this.bpmnElementPropertyList)
      // 判断当前属性是否存在
      this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []))
      let index = -1
      for (let i = 0; i < this.elementPropertyList.length; i++) {
        let key = this.elementPropertyList[i].name
        if (name === 'compliance' && key === 'compliance') {
          index = i
        }
      }
      if (index !== -1) {
        console.log('修改')
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[index], {
          name,
          value
        })
      } else {
        console.log('新增')
        // 新建属性字段
        const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value })
        // 新建一个属性字段的保存列表
        const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
          values: this.bpmnElementPropertyList.concat([newPropertyObject])
        })
        this.updateElementExtensions(propertiesObject)
      }
    },
    updateElementExtensions(properties) {
      const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
        values: this.otherExtensionList.concat([properties])
      })
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        extensionElements: extensions
      })
    },
    // 弹出显示
    isDialog() {
      this.complianceOpen = true
      this.$nextTick(() => {
        this.$refs.complianceTreeTable.init()
      })
    },
    // 确认
    deptSubmitForm() {
      this.complianceOpen = false
      this.fileTable = this.multipleSelection
      this.saveAttribute('compliance', JSON.stringify(this.fileTable))
    },
    // 取消
    deptCancel() {
      this.complianceOpen = false
    },
    // 子页面回传参数
    checkData(data) {
      console.log('子页面回传参数', data)
      this.multipleSelection = data
    },
    // 获取详情
    getInfo(id) {
      this.complianceInfoOpen = true
      getRisk(id).then(res => {
        this.info = res.data
      })
    },
    // 移除文件
    removeAttributes(attr, index) {
      this.$confirm('确定移除当前合规风险提示么？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      })
        .then(() => {
          this.fileTable.splice(index, 1)
          this.saveAttribute('compliance', JSON.stringify(this.fileTable))
        })
        .catch(() => console.info('操作取消'))
    }
  },
  beforeDestroy() {
    this.bpmnElement = null
  }
}
</script>
